﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/scripts/jquery.js"></script>
    <style>
        .red{
            color:red;
        }
        .hidden{
            display:none;
        }
    </style>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            <p>用户名：@Html.TextBox("username", "", new { @id = "username",@onblur="checkInput()" })<span class="red hidden" id="userTip" >请输入用户名</span></p>
            <p>密码：@Html.TextBox("password", "", new { @id = "password", @onblur = "checkInput()" })<span class="red hidden" id="passwordTip">请输入密码</span></p>
            <p>确认密码：@Html.TextBox("confirmpassword", "", new { @id = "confirmpassword" , @onblur = "checkInput()" })<span class="redhiddenTip">两次密码不一致</span></p>
        }
    </div>
    <script>
        function checkInput() {
            var username = $("#username").val();
            var password = $("#password").val();
            var confirmpassword = $("#confirmpassword").val();
            if (username == "") {
                $("#userTip").removeClass("hidden");

            } else {
                $("#userTip").addClass("hidden");
            }
            if (password == "") {
                $("#passwordTip").removeClass("hidden");

            } else {
                $("#passwordTip").addClass("hidden");
            }
            if (password == "confirmpassword") {
                $("#redhiddenTip").removeClass("hidden");

            } else {
                $("#redhiddenTip").addClass("hidden");
            }
            return true;
        }
        $(document).ready(function () {
            $("form").bind("submit", checkInput);

        })
    </script>
</body>
</html>
